<template>
    <div class="fflex" >
        <MjpgVideo></MjpgVideo>
        <ul>
            <div class="head-bar" >
                <div class="deepshow">

                </div>
                <div class="outerCC" :style="{transform: 'rotate('+ roz + 'deg)'}">
                    <div :style="{transform:'rotate(' + fixAg +'deg)'}">
                        <img src="/src/assets/img/jiantou.png" alt="" width="55"></div>
                </div>
                <div class="ccshow">
                    <li>水温:</li>
                    <li>27℃</li>
                </div>
                <div class="ccshow">
                    <li >电量：</li>
                    <li >75%</li>
                </div>
            </div>
            <MoterPWM :mo1="mms.m1" :mo2="mms.m2" :mo3="mms.m3"
                      :mo4="mms.m4" :mo5="mms.m5" :mo6="mms.m6"/>
        </ul>
    </div>

    
</template>
 

<script setup>
    import MjpgVideo from '../components/MjpgVideo.vue';
    //import { SerialPort } from 'tauri-plugin-serialplugin';
    import {ref,inject, reactive,computed} from 'vue';
    import { Command } from '@tauri-apps/plugin-shell';
    import MoterPWM from '../components/MoterPWM.vue'
    
    const uart_port = inject('uart_port')

    async function test_poweroff(){
        let result = await Command.create('run-ping', [
                                         "www.baidu.com","-t"
                                        ]).execute();
        console.log("创建子进程 其程序输出的消息:\n",result.stdout)
                                
    }
    const mms=reactive({
        m1:3000, 
        m2:3000,
        m3:3000,
        m4:3000,
        m5:3000,
        m6:3000
    })
    const roz = ref(0)
    const fixAg = computed(()=>{
        return  - roz.value - 45
    })
    setInterval(()=>{
        for(let i=0; i<6; i++){
            mms[`m${i+1}`] = (Math.random()>0.5 ? 1: -1)*Math.floor(Math.random()*800) + 3000
        }
        roz.value += 13
        if(roz.value > 180) roz.value = -179
    },500)
</script>

<style scoped>
.head-bar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 275px;
}
.fflex{
    display: flex;
}

.outerCC{
    padding: 30px;
    /* border: 5px double #2326f9; */
    /* border-radius: 50%; */
    margin-bottom: 15px;
    background-image: url(/src/assets/img/outer.jpg);
    background-size: 115px 115px;
    background-repeat: no-repeat;
    /* transform: rotate(var(--roz) ); */
}
.deepshow{
    width: 10px;
    height: 55px;
    background-color: #154c1c;
    border: 1px solid black;
}
.ccshow li{
    list-style: none;
}
</style>